<template lang="pug">
.handdraw-view.select-none(ref='scroll' v-if="handdrawData && handdrawData.full_image_url")
  .handdraw-view-box(
    ref='wrap'
    @touchstart='onImgTouchStart'
    @touchmove='onImgTouchMove'
    @touchend='onImgTouchEnd'
    @dragstart.prevent=''
    @wheel.prevent='')
    img.main-img(:src='handdrawData.full_image_url' ref='mainImg' @load='setImagSize' :style='`cursor: ${isMove ? "move" : "auto"};`')

    .handdraw-point.hand.animated(
      v-for="(item, idx) in getPointList"
      :key="item.point_id"
      :class='[handPointId == item.point_id ? overviewMarkAnimationList[handdrawData.styleeffect].animation : ""]'
      :style='`left:${item.x}%; top:${item.y}%`'
      v-show='handOptionId==item.material_id')

      img.handdraw-point-img(:src='!Number(item.mark_image_url) ? item.full_mark_image_url : `static/images/handdraw/mark${item.mark_image_url}.png`' @click='handleClick(item)')

      .handdraw-intro(v-if='item.pano_id && item.point_id == handPointId' @click.stop='jumpPano(item)')
          img.handdraw-intro-img(:src='item.full_icon_src')
          p.omit.handdraw-intro-name {{item.name}}

      .handdraw-name(v-show="((item.pano_id && item.point_id != handPointId) || (item.point_id == handPointId))")
        p.handdraw-name-p.omit(@click='handleClick(item)' :style='{"background-color": getPointBgcolor(item)}') {{item.name}}

</template>
<script>
import { mapGetters } from 'vuex'
import { isPc, range } from '@/utils'
function getDistance (touches) {
  return Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2))
}
const el = document.body
const width = window.innerWidth
const height = window.innerHeight

export default {
  data () {
    this.isPc = isPc()
    this.minZoom = 1
    this.maxZoom = 2

    // 手机端横屏兼容
    return {
      overviewMarkAnimationList: {
        0: { label: '无效果', id: 0, animation: '' },
        1: { label: '弹跳', id: 1, animation: 'bounce' },
        // 2: { label: '晃动', id: 2, animation: 'shake' },
        2: { label: '闪烁', id: 2, animation: 'flash' },
        3: { label: '呼吸', id: 3, animation: 'pulse' },
        4: { label: '心跳', id: 4, animation: 'rubberBand' },
      },
      isMove: false,
      scale: 1,
      sizescale: 1,
      atScreen: false, // false为竖屏 true为横屏
    }
  },
  computed: {
    ...mapGetters(['handdrawData', 'handOptionId', 'handPointId']),
    // 点数据
    getPointList() {
      if (this.handdrawData && this.handdrawData.point_list && this.handdrawData.point_list.length > 0) {
        return this.handdrawData.point_list
      }
      return []
    },
  },
  watch: {
    scale () {
      const el = this.$refs.mainImg
      if (this.mainImgInitWidth) {
        el.style.width = this.mainImgInitWidth * this.scale + 'px'
      } else {
        el.style.height = this.mainImgInitHeight * this.scale + 'px'
      }
    },
    'handdrawData.view_type': { // view_type 0:横屏 1:竖屏
      handler (val) {
        if (!this.isPc) {
          if (val) {
          // 横屏切竖屏
            this.atScreen = false
            this.verticalScreen()
          } else {
            this.atScreen = true
            this.horizontalScreen()
          }
        }
      },
      immediate: true,
    },
  },
  created () {
    this.$nextTick(() => {
      // 阻止safiri浏览器双指/双击放大
      document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault()
        }
      })
      var lastTouchEnd = 0
      document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime()
        if (now - lastTouchEnd <= 300) {
          event.preventDefault()
        }
        lastTouchEnd = now
      }, false)
      document.addEventListener('gesturestart', function (event) {
        event.preventDefault()
      })
    })
  },
  mounted () {
    el.style['transform-origin'] = 'left top'
    window.addEventListener('resize', this.setImagSize)
    window.addEventListener('wheel', this.handleWheel)
  },
  methods: {
    // 获取热点标题背景颜色
    getPointBgcolor(item) {
      if (this.handdrawData) {
        // material_id
        let val = '#409EFF'
        this.handdrawData.overview_menu_items.options.map(child => {
          if (child.id == item.material_id) {
            val = child.color
          }
        })
        return val
      }
    },
    // 跳转作品链接
    jumpPano(item) {
      if (item.pano_id > 0) {
        let url = item.preview_url + '?draw=' + this.handdrawData.overview_id + '&t=' + Date.now()
        window.open(url, '_self')
      }
    },
    // 点击事件
    handleClick(item) {
      // console.log(item)
      // if (!item.pano_id) return
      if (!this.handPointId || this.handPointId != item.point_id) {
        this.$store.dispatch('updateHandPointId', item.point_id)
      } else {
        this.$store.dispatch('updateHandPointId', '')
      }
    },
    horizontalScreen () {
      // 移动端横屏
      el.style.transform = `rotate(90deg) translateY(-${width}px)`
      el.style.width = height + 'px'
      el.style.height = width + 'px'
      this.$nextTick(() => {
        this.setImagSize()
      })
    },
    verticalScreen () {
      // 移动端竖屏
      el.style.transform = 'rotate(0deg) translateY(0px)'
      el.style.width = width + 'px'
      el.style.height = height + 'px'
      this.$nextTick(() => {
        this.setImagSize()
      })
    },
    setImagSize () {
      // 铺满屏幕
      const el = this.$refs.mainImg
      let sizeX, sizeY
      if (this.atScreen) {
        sizeX = window.innerHeight
        sizeY = window.innerWidth
      } else {
        sizeX = window.innerWidth
        sizeY = window.innerHeight
      }
      const { naturalHeight, naturalWidth } = el
      const width = sizeY / naturalHeight * naturalWidth
      if (width < sizeX) {
        this.mainImgInitWidth = el.style.width = sizeX + 'px'
        this.mainImgInitWidth = sizeX
        this.mainImgInitHeight = 0
        el.style.height = 'auto'
      } else {
        el.style.width = 'auto'
        el.style.height = sizeY + 'px'
        this.mainImgInitWidth = 0
        this.mainImgInitHeight = sizeY
      }
    },
    handleUp () {
      document.removeEventListener('touchmove', this.handleUp)
      document.removeEventListener('touchend', this.handleMove)
      this.lastX = 0
      this.lastY = 0
      this.isMove = false
    },
    handleMove (evt) {
      const touche = evt.touches[0]
      this.$refs.scroll.scrollLeft -= touche.clientX - this.lastX
      this.$refs.scroll.scrollTop -= touche.clientY - this.lastY
      this.lastX = touche.clientX
      this.lastY = touche.clientY
    },
    handleWheel ({ deltaY }) {
      this.scale += deltaY > 0 ? -0.1 : 0.1
      this.scale = range(this.scale, this.minZoom, this.maxZoom)
    },
    onImgTouchStart (evt) {
      this.isMove = true
      const touches = evt.touches
      if (touches.length === 2) {
        this.startZoom(evt)
        this.zooming = true
      } else if (touches.length === 1 && this.isPc) {
        this.lastX = touches[0].clientX
        this.lastY = touches[0].clientY
        document.addEventListener('touchmove', this.handleMove)
        document.addEventListener('touchend', this.handleUp)
      }
    },
    onImgTouchMove (evt) {
      const touches = evt.touches
      if (this.zooming && touches.length === 2) {
        const distance = getDistance(touches)
        const scale = this.startScale * distance / this.startDistance
        this.sizescale = scale
        this.scale = range(scale, this.minZoom, this.maxZoom)
      }
    },
    onImgTouchEnd (evt) {
      if (this.zooming && !evt.touches.length) {
        this.zooming = false
        this.startMoveX = 0
        this.startMoveY = 0
        this.startScale = 1
      }
    },
    startZoom (evt) {
      this.zooming = true
      this.startScale = this.scale
      this.startDistance = getDistance(evt.touches)
    },
  },
}
</script>

<style lang="stylus" scoped>
// .ttaa
//   -webkit-animation-name tada
//   animation-name tada
// .bounce
//   -webkit-animation-name bounce
//   animation-name bounce
// // .flash
// //   -webkit-animation-name flash
// //   animation-name flash
// .shake
//   -webkit-animation-name shake
//   animation-name shake
// .pulse
//   -webkit-animation-name pulse
//   animation-name pulse
// .rubberBand
//   -webkit-animation-name rubberBand
//   animation-name rubberBand

.mobile-mode .handdraw-view
  width 100%
  height 100%

.pc-mode .handdraw-view
  height calc(100% + 30PX)
  width calc(100% + 30PX)
  .main-img
    transition all 0.3s
.handdraw-view
  overflow scroll
  .handdraw-view-box
    display inline-block
    position relative
    .handdraw-point
      position absolute
      width 30px
      height 34px
      .handdraw-point-img
        width 30px
        height 34px
      .handdraw-name
        position absolute
        bottom 36px
        left -75px
        box-sizing border-box
        z-index 100
        text-align center
        width 180px
        height 26px
        cursor default
        p.handdraw-name-p
          max-width 180px
          display inline-block
          box-sizing border-box
          white-space nowrap
          color #fff
          padding 3px 6px
          border-radius 20px
          font-size 12px
          background-color #409efa
          border 2px solid #fff
          cursor pointer
      .handdraw-intro
        width 180px
        height 120px
        position absolute
        z-index 101
        bottom 36px
        left -75px
        box-sizing border-box
        .handdraw-intro-img
          width 100%
          height 90px
          box-sizing border-box
        .handdraw-intro-name
          width 100%
          background-color #fff
          height 30px
          color #333
          font-size 14px
          box-sizing border-box
          padding 6px
</style>
